"use client"

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"

export type AIModel =
  | "anthropic/claude-sonnet-4.5"
  | "openai/gpt-5-mini"
  | "google/gemini-2.5-flash-image"
  | "openai/gpt-4o"

interface ModelSelectorProps {
  value: AIModel
  onChange: (model: AIModel) => void
  disabled?: boolean
}

export default function ModelSelector({ value, onChange, disabled }: ModelSelectorProps) {
  return (
    <div className="space-y-2">
      <Label htmlFor="model-select" className="text-sm font-medium">
        AI Model
      </Label>
      <Select value={value} onValueChange={(val) => onChange(val as AIModel)} disabled={disabled}>
        <SelectTrigger id="model-select" className="w-full">
          <SelectValue placeholder="Select a model" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="google/gemini-2.5-flash-image">
            <div className="flex flex-col items-start">
              <span className="font-medium">Gemini 2.5 Flash Image</span>
              <span className="text-xs text-muted-foreground">Fast, optimized for images</span>
            </div>
          </SelectItem>
          <SelectItem value="anthropic/claude-sonnet-4.5">
            <div className="flex flex-col items-start">
              <span className="font-medium">Claude Sonnet 4.5</span>
              <span className="text-xs text-muted-foreground">Balanced performance</span>
            </div>
          </SelectItem>
          <SelectItem value="openai/gpt-5-mini">
            <div className="flex flex-col items-start">
              <span className="font-medium">GPT-5 Mini</span>
              <span className="text-xs text-muted-foreground">Fast and efficient</span>
            </div>
          </SelectItem>
          <SelectItem value="openai/gpt-4o">
            <div className="flex flex-col items-start">
              <span className="font-medium">GPT-4o</span>
              <span className="text-xs text-muted-foreground">High accuracy</span>
            </div>
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}
